<template>
  <div>
    <el-container>
      <el-header>
        <h1>患者1 辅助检查信息</h1>
        <el-button
          class="primaryEditButton"
          plain="true"
          type="primary"
          icon="el-icon-edit"
          @click="detileUpdate"
        >
          修改
        </el-button>
      </el-header>
      <el-card class="box-card">
        <div slot="header" class="box-header">
          <h1>B超</h1>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="8"
                  ><el-tag effect="dark" size="medium" type="warning"
                    >检查日期</el-tag
                  ></el-col
                >
                <el-col :span="8"
                  ><el-tag class="info" type="info" prop=""
                /></el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-tag effect="dark" size="medium" type="warning"
                >检查时间是月经周期的第几天
              </el-tag>
              <el-tag class="info" type="info">XX</el-tag>
            </div>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-tag effect="dark" size="medium" type="warning"
                >内膜厚度</el-tag
              >
              <el-tag class="info" type="info">2022.4.15</el-tag>
            </div></el-col
          >
        </el-row>
        <div>
          <el-tag effect="dark" size="medium" type="warning">B超提示</el-tag>
          <el-tag class="info" type="info">2022.4.15</el-tag>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="box-header">
          <h1>乳腺</h1>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="box-header">
          <h1>相关血液检查</h1>
        </div>
        <div class="grid-content bg-purple">
          <el-tag effect="dark" size="medium" type="warning">检查日期</el-tag>
          <el-tag class="info" type="info">2022.4.15</el-tag>
        </div>
        <div class="grid-content content bg-purple">
          <el-tag class="el-tag" effect="dark" size="medium" type="warning"
            >血脂结果检查</el-tag
          >
          <el-row :gutter="20">
            <el-col :span="6">{TG}</el-col>
            <el-col :span="6">{TC}</el-col>
            <el-col :span="6">{HDL-C}</el-col>
            <el-col :span="6">{LDLC}</el-col>
          </el-row>
        </div>
        <div class="grid-content content">
          <el-tag class="el-tag" effect="dark" size="medium" type="warning"
            >血脂结果检查</el-tag
          >
          <el-row :gutter="20">
            <el-col :span="6">空腹静脉全血</el-col>
            <el-col :span="6">服糖1h静脉全血</el-col>
            <el-col :span="6">服糖2h静脉全血</el-col>
          </el-row>
        </div>
        <div class="grid-content content">
          <el-tag class="el-tag" effect="dark" size="medium" type="warning"
            >肝肾功能</el-tag
          >
        </div>
        <div class="grid-content content">
          <el-tag class="el-tag" effect="dark" size="medium" type="warning"
            >凝血和血常规</el-tag
          >
        </div>
        <div class="grid-content content">
          <el-tag class="el-tag" effect="dark" size="medium" type="warning"
            >维生素D质谱</el-tag
          >
        </div>
        <div class="grid-content content">
          <el-tag class="el-tag" effect="dark" size="medium" type="warning"
            >骨密度测定</el-tag
          >
        </div>
      </el-card>
    </el-container>
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div></el-dialog
    >
  </div>
</template>

<script>
import {
  listUser,
  getUser,
  delUser,
  addUser,
  updateUser,
} from "@/api/system/user";

export default {
  data() {
    return {
      open: false,
      title: "",
      checkDate: null,
      mensesDate: null,
      width: null,
    };
  },
  methods: {
    //修改辅助检查信息
    detileUpdate(row) {
      const userId = row.userId || this.ids;
      getUser(userId).then((response) => {
        this.open = true;
        this.title = "修改辅助检查信息";
      });
    },
    reset() {
      this.form = {};
    },
  },
  submitForm() {
    this.$refs["form"].validate((valid) => {
      if (valid) {
        if (this.form.userId != null) {
          updateUser(this.form).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
        } else {
          addUser(this.form).then((response) => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.getList();
          });
        }
      }
    });
  },
  cancel() {
    this.open = false;
    this.reset();
  },
};
</script>
<style>
h1 {
  padding-left: 20px;
  font-size: x-large;
  font-weight: bold;
  display: inline-block;
}
.primaryEditButton {
  position: absolute;
  right: 50px;
  top: 20px;
}
.box-card {
  position: relative;
  margin: auto;
  width: 80%;
  top: 10px;
  margin-bottom: 20px;
}
.box-header {
  padding-left: 10px;
  color: #f59a23;
}
.info {
  margin-left: 10px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-tag {
  margin-bottom: 20px;
}
.content {
  margin-bottom: 20px;
}
</style>
